<template>
  <div class="pan-main-breadcrumb-content">
    <el-breadcrumb style="display: inline-block">
      <el-breadcrumb-item>
        <a class="breadcrumb-item-a" @click="goBack" href="#">返回</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider direction="vertical" style="vertical-align: top !important" />
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="display: inline-block"
    >
      <el-breadcrumb-item v-for="(item, index) in breadCrumbs" :key="index">
        <a class="breadcrumb-item-a" @click="goToThis(item.id)" href="#">{{
          item.name
        }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-left: auto; display: flex; align-items: center">
      <uploadButton
        roundFlag
        size="mini"
        style="margin-left: 20px; margin-right: 0"
      >
      </uploadButton>
      <createFolderButton
        roundFlag
        size="mini"
        style="margin-left: 20px; margin-right: 0"
      ></createFolderButton>
      <pan-task-list id="v-step-1" style="margin-left: 20px" />
      <search-btn id="v-step-2" style="margin-left: 20px" />
      <!-- <sort-btn style="margin-left: 20px" /> -->
      <list-type-btn id="v-step-3" style="margin-left: 20px" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import ListTypeBtn from '@/components/list-type-btn/index.vue'
import SortBtn from '@/components/sort-btn/index.vue'
import createFolderButton from '@/components/buttons/create-folder-button/index.vue'
import uploadButton from '@/components/buttons/upload-button/index.vue'
// import AddBtn from '@/components/add-btn/index.vue'
import SearchBtn from '@/components/search/btn.vue'
import PanTaskList from '../task-list'
export default {
  name: 'BreadCrumb',
  components: {
    ListTypeBtn,
    SortBtn,
    // AddBtn,
    SearchBtn,
    PanTaskList,
    createFolderButton,
    uploadButton,
  },
  props: {},
  data() {
    return {}
  },
  methods: {
    ...mapMutations({
      resetParentId: 'file/setFileParentId',
      resetBreadCrumb: 'breadcrumb/reset',
      setSearchFlag: 'file/setSearchFlag',
    }),
    ...mapActions({
      reloadFileList: 'file/loadFileList',
    }),
    goBack() {
      let _this = this
      _this.setSearchFlag(false)
      if (_this.breadCrumbs.length > 1) {
        let resolveBreadCrumbs = [..._this.breadCrumbs]
        resolveBreadCrumbs.pop()
        let newId = resolveBreadCrumbs.pop().id
        _this.goToThis(newId)
      }
    },
    goToThis(id) {
      if (id !== '-1') {
        let newBreadCrumbs = new Array()
        this.breadCrumbs.some((item) => {
          newBreadCrumbs.push(item)
          if (item.id == id) {
            return true
          }
        })
        this.resetBreadCrumb(newBreadCrumbs)
        this.resetParentId(id)
        this.setSearchFlag(false)
        this.reloadFileList()
      }
    },
  },
  computed: {
    ...mapGetters(['breadCrumbs']),
  },
  mounted() {},
  watch: {},
}
</script>

<style scoped>
.pan-main-breadcrumb-content {
  width: 100%;
  padding: 0 25px 0 25px;
  height: 45px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

.breadcrumb-item-a {
  cursor: pointer !important;
  color: #409eff !important;
}
</style>
